﻿var webSocket;


$(window).load(function () {
    themVaoContactBox(1, 'Tran Thi', 'onl', '../../Images/onl.png');
    themVaoContactBox(2, 'Chen Shi', 'off', '../../Images/onl.png');
    themVaoContactBox(3, 'Phuong', 'off', '../../Images/onl.png');
    themVaoContactBox(4, 'Abch', 'off', '../../Images/onl.png');
    themVaoContactBox(5, 'nhjsal', 'off', '../../Images/onl.png');
});

var nChatBox = 0;

function xemTrangCaNhan() {
    window.location.href = '/TaiKhoan/TrangCaNhan';
}

function goiTinNhan(txtMsgTag) {
    var t = txtMsgTag.val();
    if (t == '') {
        return;
    }
    var p = txtMsgTag.parent().parent();
    var div = '<div style="width:246px"><span style="color:#00f">' +
        '<b>Tôi:</b>  </span>' + t + '</div>';
    p.find('.chatbox .viewport .overview').append(div);
    txtMsgTag.val('');
    p.find('.chatbox').tinyscrollbar_update('bottom');
}

// id nguoi dung, name: ten ban be, stt: trang thai:onl | off; img: duong dan hinh anh
function themVaoContactBox(id, name, stt, img) {
    var s = '<div id="contact-#{id}" class="contact_row">' +
                '<input type="hidden" name="fid" value="#{id}" />' +
                '<div style="float:left;width:30px">' +
                    '<img style="margin:auto" alt="avatar" width="25px" height="25px"' +
                        'src="#{avt}" />' +
                '</div>' +
                '<div style="float:left;width:10px;height:10px;margin:7px 0" class="stt_#{stt}"></div>' +
                '<div class="tenBB" style="float:left;padding:0 0 0 5px">#{name}</div>' +
                '<div class="clear"></div>' +
            '</div>';
    var div = $(s.replace(/#\{id\}/g, id).replace(/#\{name\}/g, name)
            .replace(/#\{avt\}/g, img).replace(/#\{stt\}/g, stt));
    $('#contacts').append(div);
}

function themVaoChatBox(id, name) {
    var t = $('#chatBoxes').find('#chatBox-' + id);
    if (t.length > 0) {
        if (nChatBox > 3) {
            var num = t.find('input[name=num]').val();
            $('#chatBoxP').scrollLeft(4000 - num * 270);//scroll toi chat box
        }
        return;
    }

    nChatBox++;
    if (nChatBox == 4) {
        $('#chatBoxes').width(4000);
        $('#chatBoxP').addClass('overflowx');
    }

    var s = '<div id="chatBox-#{id}" style="width:250px;border:2px solid rgb(104,33,122);' +
                'border-radius:5px 5px 0 0;float:right;margin-left:10px;background:#fff">' +
                '<input type="hidden" name="cid" value="#{id}" />' +
                '<input type="hidden" name="num" value="#{num}" />' +
                '<div class="chatBox-title" style="background:rgb(104,33,122);height:20px;' +
                    'color:#fff;cursor:pointer">' +
                    '<div style="padding:0 0 0 10px;text-shadow:1px 1px 1px #000">#{name}' +
                    '<span class="closeChatBox" style="float:right;padding-right:10px">x</span></div>' +
                '</div>' +
                '<div class="chatbox">' +
                    '<div class="scrollbar">' +
                        '<div class="track">' +
                            '<div class="thumb">' +
                                '<div class="end"></div>' +
                            '</div>' +
                        '</div>' +
                    '</div>' +
                    '<div class="viewport">' +
                        '<div class="overview" style="word-wrap:break-word;font-family:Tahoma;font-size:10.5pt"></div>' +
                    '</div>' +
                '</div>' +
                '<div>' +
                    '<textarea style="width:244px;resize:none;height:30px;font-family:Tahoma;font-size:10pt" name="txtMsg"></textarea>' +
                '</div>' +
            '</div>' +
            '<div id="chattBoxHide-#{id}" class="chatBoxHide hide" style="background:rgb(104,33,122);' +
                'height:20px;color:#fff;cursor:pointer;width:250px;float:right;' +
                'border-radius:5px 5px 0 0;margin:200px 0 0 10px">' +
                '<input type="hidden" name="cid" value="#{id}" />' +
                '<div style="padding:0 0 0 10px;text-shadow:1px 1px 1px #000">#{name}</div>' +
            '</div>';
    var div = $(s.replace(/#\{id\}/g, id).replace(/#\{name\}/g, name)
            .replace(/#\{num\}/g, nChatBox));
    $('#chatBoxes').append(div);
    $('#chatBoxP').scrollLeft(4000 - nChatBox * 270);
    $('#chatBox-' + id + ' .chatbox').tinyscrollbar();
}

function dangXuat() {
    alert('Dang xuat');
    window.location.href = '/Home/Index';
}

function timNguoiChat() {
    alert('tim nguoi chat');
}

function chuyenTrangTimKiemBanBe() {
    alert('trang tim kiem ban be');
}

function chuyenTrangCaiDat() {
    window.location.href = '/TaiKhoan/CaiDatTaiKhoan';
}

function moDanhSachChat() {
    $('#contactDiv1').addClass('hide');
    $('#contactDiv2').removeClass('hide');
    $('#contactDiv2').css({
        'max-height': document.documentElement.clientHeight - 60,
        'overflow-y': 'auto',
        'overflow-x': 'hidden'
    });
}

function dongDanhSachChat() {
    $('#contactDiv1').removeClass('hide');
    $('#contactDiv2').addClass('hide');
}

function executeMessage(e) {

}

$(document).ready(function () {

    webSocket = new WebSocket("ws://http:/localhost:50461/api/WebSocket/get");

    webSocket.onmessage = function (e) {
        executeMessage(e.data);
    };

    webSocket.onopen = function (e) {
    };

    webSocket.onclose = function (e) {
    };

    webSocket.onerror = function (e) {
    };


    $('#bnCaNhan').click(function () {
        xemTrangCaNhan();
    });

    $('#contactDiv1').live('click', function () {
        moDanhSachChat();
    });

    $('#contactDivCaption').live('click', function () {
        dongDanhSachChat();
    });

    $('#bnTimBan').click(function () {
        chuyenTrangTimKiemBanBe();
    });

    $('#bnCaiDat').click(function () {
        chuyenTrangCaiDat();
    });

    $('#bnDangXuat').click(function () {
        dangXuat();
    });

    $('.contact_row').live('click', function () {
        var id = $(this).find('input[name=fid]').val();
        var name = $(this).find('.tenBB').text();
        themVaoChatBox(id, name);
    });

    $('.chatBox-title').live('click', function () {
        var p = $(this).parent();
        var id = p.find('input[type=hidden]').val();
        p.addClass('hide');
        $('#chattBoxHide-' + id).removeClass('hide');
    });

    $('.closeChatBox').live('click', function () {
        var p = $(this).parent().parent().parent();
        var id = p.find('input[type=hidden]').val();
        var chatBox = $('#chatBox-' + id);
        var num = chatBox.find('input[name=num]').val();
        chatBox.find('input[name=num]').val('0');
        var chatBox_num = $('#chatBoxes').find('input[name=num]');
        var n = chatBox_num.length;
        for (i = 0; i < n; i++) {
            var v = chatBox_num[i].defaultValue;
            if (v > num) {
                v--;
                chatBox_num[i].defaultValue=v;
            }
        }
        $('#chatBox-' + id).remove();
        $('#chattBoxHide-' + id).remove();
        nChatBox--;
        if (nChatBox == 3) {
            $('#chatBoxes').width('100%');
            $('#chatBoxP').removeClass('overflowx');
        }
    });

    $('textarea[name=txtMsg]').live('keypress', function (e) {
        if (e.keyCode == 13) {
            var txtMsgTag = $(this);
            goiTinNhan(txtMsgTag);
            e.preventDefault();
        }
    });

    $('.chatBoxHide').live('click', function () {
        var id = $(this).find('input[type=hidden]').val();
        $(this).addClass('hide');
        $('#chatBox-' + id).removeClass('hide');
    });

    $('#contactDiv2 input[name=txtTimNguoiChat]').keypress(function (e) {
        if (e.keyCode == 13) {
            timNguoiChat();
        }
    });
});